<template>
  <div class="cityList-page">
    <van-nav-bar
      title="城市列表"
      left-arrow
      ref="ctlist"
      @click-left="onClickLeft"
    />
    <div v-for="item in list" :key="item.label">
      <van-index-bar :index-list="arr">
        <van-index-anchor index="">{{item.label}}</van-index-anchor>
        <van-cell :title="item.label" />
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getCity } from '@/api/user'
export default {
  name: 'cityList-page',
  data () {
    return {
      list: [],
      arr: []
    }
  },
  async created () {
    const data = await getCity(1)
    // console.log(data)
    this.list = [...this.list, ...data.body]
    // console.log(this.list)

    this.arr = this.list.map(
      item => (item.pinyin = item.pinyin[0].toUpperCase())
    )
  },

  methods: {
    onClickLeft () {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped></style>
